<template>
  <div id="course">
<!--组件之间的数据传输参考文档-->
<!--    https://segmentfault.com/a/1190000019208626-->
    <!--这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,
巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级-->
<!--    var Event=new Vue();-->
<!--    Event.$emit(事件名,数据);-->
<!--    Event.$on(事件名,data => {});-->
<!--    <el-tabs v-model="activeName" @tab-click="handleClick">-->
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <!-- 当用户类型=2 是老师页面才显示     -->
      <el-tab-pane v-if="this.$store.state.user.user.userType==2" label="列表查询" name="course_list">
        <!--    列表组件-->
        <!--        <course-list ref="courseList" v-bind:sendUrl="sendUrl"></course-list>-->
        <course-list ref="courseList"  v-on:courseDetailFromAction="courseDetailFrom"></course-list>
        <!--     form表单组件-->
        <!--    <course-save ref="courseSave" v-bind:sendUrl="sendUrl"></course-save>-->
        <course-save ref="courseSave"  v-on:courseFindTableListAction="courseFindTableList"></course-save>

      </el-tab-pane>
      <!-- 当用户类型=2 是老师页面才显示     -->
      <el-tab-pane v-if="this.$store.state.user.user.userType==2" label="一对一学生管理" name="student">
        <course-student></course-student>
      </el-tab-pane>
      <!-- 当用户类型=2 是老师页面才显示     -->
      <el-tab-pane v-if="this.$store.state.user.user.userType==2" label="体招学生管理" name="sport_student">
        <sport-student></sport-student>
      </el-tab-pane>
      <!-- 当用户类型=2 是老师页面才显示     -->
      <el-tab-pane v-if="this.$store.state.user.user.userType==2" label="单词模板" name="word_module">
        <word-module></word-module>
      </el-tab-pane>

      <!-- 当用户类型=2 是老师页面才显示     -->
<!--      <el-tab-pane v-if="this.$store.state.user.user.userType==2" label="听写列表" name="word_result">-->
     <el-tab-pane label="听写列表" name="word_result">
        <word-result></word-result>
      </el-tab-pane>

      <el-tab-pane label="用户管理" name="user">

        <course-user></course-user>
<!--        <course-user v-bind:userId="userId" v-bind:userName="userName"></course-user>-->

      </el-tab-pane>


    </el-tabs>

  </div>
</template>

<script>
  //导入list 组件
    import CourseUser from "../user/CourseUser";
   import CourseStudent from "../user/CourseStudent";
  import SportStudent from "../user/SportStudent";
  import WordModule from "../word/WordModule";
  import courseList from "./courseList";
  import courseSave from "./courseSave";
  import WordResult from "../word/WordCheck";
  import Bus from "./bus";
  // import {mapState} from "vuex";
    export default {
      name: "course",
      components: {
        WordModule,
        WordResult,
        CourseUser,
        CourseStudent,
        SportStudent,
        courseList,
        courseSave
      },
      data () {
        return {
          activeName: this.$store.state.course.activeName,
          // userId:"",
          // userName:""
        }
      },
      mounted() { //mounted 是vue的生命周期函数中的其中一个，表示，页面加载完毕执行
      },
      methods :{
        handleClick(tab, event) {
          console.log('.......');
          // const activeName = this.$store.state.course.activeName
          console.log(this.activeName);

          if(this.activeName==='user') {
            //刷新数据
            this.$nextTick(function () {
              // 刷新用户信息界面
              Bus.$emit('toCourseUserRefreshUserAction', '刷新用户信息');
            });

          }else if(this.activeName==='student') {
            this.$nextTick(function () {
              // 刷新学生信息界面
              Bus.$emit('toCourseStudentRefreshStudentAction', '刷新学生信息');
            });
         }else if(this.activeName==='course_list'){
            // 刷新列表信息界面
            this.$nextTick(function () {
              Bus.$emit('toCourseListRefreshCourseAction', '刷新列表信息');
            });
          }else if(this.activeName==='sport_student'){
            this.$nextTick(function () {
              // 刷新学生信息界面
              Bus.$emit('toSportStudentRefreshStudentAction', '刷新体招学生信息');
            });
          }else if(this.activeName==='word_module'){
            this.$nextTick(function () {
              // 刷新单词模板信息
              Bus.$emit('toWordModuleRefreshStudentAction', '刷新单词模板信息');
            });
          }else if(this.activeName==='word_result'){
            this.$nextTick(function () {
              // 刷新单词模板信息
              Bus.$emit('toWordResultRefreshStudentAction', '刷新单词听写结果信息');
            });
          }
        },

        //刷新列表
        courseFindTableList(){
          //父组件调用子组件的查询函数 courseList
          this.$refs.courseList.findTableList();
        },

        //打开form表单
        courseDetailFrom(data,stage,slotCode,dayStr){
          //父组件调用子组件的保存函数 courseSave
          this.$refs.courseSave.childCourseDetailFrom(data,stage,slotCode,dayStr);
        },


        //监听浏览器刷新
        unloadFn(e){
          console.log("浏览器刷新中...");
          console.log(e)
        }

      },
      created() {

      },
      // computed:{
      //   //映射 sportStudent模块下的 studentUser对象
      //   ...mapState('course', ['activeName'])
      // },
      beforeMount() {
        window.addEventListener("beforeunload", e => {
          this.unloadFn(e);
        });
      }
    }
</script>

<style scoped>
  #course {background-color: #fde2e2}
  /*body{background-color: #ccc}*/
</style>
